<template>
    <div class="log-data-container">
        <div ref="chartRef" class="chart-container"></div>

        <div class="table-container">
            <zl-table
                    ref="zlTable"
                    :request-fun="api.system.getLogList"
                    :before-search="beforeSearch"
            >

                <div slot="operate" class="operate-container">
                    <el-cascader
                            clearable
                            :show-all-levels="false"
                            v-model="logParams.name"
                            :options="cascoderData"
                            :props="{label:'name',children:'children',checkStrictly: true,value:'name',emitPath:false}"
                            @change="handleChange"
                            placeholder="请选择"
                    />
                    <el-select v-model="logParams.code" @change="handleChange" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>

                <zl-table-column
                        prop="ip"
                        label="IP"
                />
                <zl-table-column
                        prop="userName"
                        label="请求用户"
                />
                <zl-table-column
                        prop="code"
                        label="响应状态"
                />
                <zl-table-column
                        prop="operation"
                        label="请求接口"
                />
                <zl-table-column
                        prop="menuName"
                        label="页面名称"
                />
                <zl-table-column
                        prop="message"
                        label="消息"
                >
                    <template slot-scope="scope">
                        <el-tooltip :content=" scope.row.message " placement="top">
                            <div
                                    class="ellipsis"
                            >
                                {{ scope.row.message }}
                            </div>
                        </el-tooltip>
                    </template>
                </zl-table-column>
            </zl-table>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "LogData",
    data() {
        return {
            api: this.$store.getters.app.api,
            options: [{
                value: '200',
                label: '200'
            }, {
                value: '500',
                label: '500'
            }],
            cascoderData: null,
            logParams: {
                name: '',
                code: '',
            },
            chart: null,
            chartData: []
        }
    },
    async mounted() {
        await this.init()
        this.initChart()
        await this.fetchChartData()
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose()
            this.chart = null
        }
    },
    methods: {
        /**
         * 初始化方法，获取菜单数据
         */
        async init() {
            let getMenusAllRes = await this.api.system.getMenusAll({pageNum: 1, pageSize: 100});
            if (getMenusAllRes.code == 200) {
                this.cascoderData = getMenusAllRes.data.list;
            }
        },

        /**
         * 表格查询前的处理方法
         * @returns {Object} 查询参数
         */
        beforeSearch() {
            return this.logParams;
        },

        /**
         * 选择器值变化时的处理方法
         * @param {*} data 选择的数据
         */
        handleChange(data) {
            console.log(data)
            this.$refs.zlTable.refresh();
        },

        /**
         * 初始化echarts图表
         */
        initChart() {
            this.chart = echarts.init(this.$refs.chartRef)
            window.addEventListener('resize', this.chart.resize)
        },

        /**
         * 获取图表数据
         */
        async fetchChartData() {
            try {
                const res = await this.api.system.countByMenuName({
                    pageNum: 1,
                    pageSize: 100  // 获取前100条数据
                })
                if (res.code === 200) {
                    this.updateChart(res.data)
                }
            } catch (error) {
                console.error('获取图表数据失败:', error)
            }
        },

        /**
         * 更新图表配置和数据
         * @param {Object} pageStats 页面访问统计数据
         */
        updateChart(pageStats) {
            const option = {
                backgroundColor: '#ffffff',
                title: {
                    text: '页面访问统计',
                    left: 'center',
                    textStyle: {
                        color: '#333333'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: Object.keys(pageStats),
                    axisLabel: {
                        interval: 0,
                        rotate: 30,
                        color: '#333333',
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#333333'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '访问量',
                    nameTextStyle: {
                        color: '#333333'
                    },
                    axisLabel: {
                        color: '#333333'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#333333'
                        }
                    }
                },
                series: [{
                    name: '访问量',
                    type: 'bar',
                    data: Object.values(pageStats),
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,  // 渐变方向：从下到上
                            [
                                { offset: 0, color: '#409EFF' },   // 顶部颜色：Element UI 主题蓝
                                { offset: 1, color: '#a7d3ff' }    // 底部颜色：浅蓝色
                            ]
                        )
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '#333333'
                    }
                }]
            }
            this.chart && this.chart.setOption(option)
        }
    }
}
</script>

<style scoped>
.log-data-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chart-container {
    height: 30%;
    min-height: 200px;
    margin-bottom: 20px;
}

.table-container {
    height: 70%;
    flex: 1;
}

.ellipsis {
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

::v-deep .el-tooltip__popper .is-dark {
    max-width: 500px !important;
    max-height: 300px !important;
    overflow: auto !important;
}

.operate-container {
    padding: 15px 15px 10px;  /* 上、左右、下内边距 */
    border-bottom: 1px solid #EBEEF5;  /* 添加底部边框，与表格风格一致 */
}

.operate-container .el-cascader {
    margin-right: 10px;  /* 级联选择器右侧间距 */
}
</style>